<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:include="common">
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="toolbar"   style="padding-left: 900px">
    <button type="button" class="btn btn-primary btn-lg"  data-toggle="modal"  data-target="#myModal"  style="text-shadow: black 5px 3px 3px;">
        <span class="glyphicon glyphicon-plus"></span> 添加收货地址
    </button>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <form id="myForm">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                                aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">新增收货地址</h4>
                    </div>
                    <div class="modal-body">收货地址</div>
                    <div class="input-group">
                        <span class="input-group-addon" >收货人姓名</span>
                        <input type="text" class="form-control" id="recipients" name="recipients">
                        <input type="hidden" id="shippingaddressId" name="shippingaddressId">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">收货人电话</span>
                        <input type="text" class="form-control" id="recipientsPhone" name="recipientsPhone">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">地址</span>
                        <input type="text" class="form-control" id="address" name="address">
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="add()">保存</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </form>
    </div>
</div>
    <table id="table"></table>
</body>
<script>
    $(function(){
        initUserTable2();
    })
    //初始化用户表格
    function initUserTable2(){

        $("#table").bootstrapTable({
            url:"../tree/findAddress",
            method : 'GET', //请求方式（*）
            toolbar:"#toolbar",
            columns:[
                {title:"收货人姓名",field:"recipients",width:100

                },
                {title:"收货人电话",field:"recipientsPhone",width:100

                },
                {title:"收货地址",field:"address",width:200,

                     },
                {title:"操作",field:'s',
                    formatter:function(value,row,index){
                            str=' <button type="button" class="btn btn-primary btn-sm" onclick="getAddress('+row.shippingaddressId+')">修改</button> | ';
                            str+='<button type="button" class="btn btn-primary btn-sm" onclick="delAddress('+row.shippingaddressId+')">删除</button>';
                        return str;
                    }},
            ],
        })
    }
    //新增收货地址
    function  add(){
        $.ajax({
            url:"../tree/addAddress",
            data:$("#myForm").serialize(),
            type:"post",
            success:function(){
                $("#table").bootstrapTable("refresh");
            }
        })
    }
//删除
    function delAddress(id){
        $.ajax({
            url:"../tree/delAddress",
            data: {id:id},
            type:"post",
            success:function(){
                $("#table").bootstrapTable("refresh");
            }
        })
    }

    //回显
    function  getAddress(id){
        $("#myModal").modal();
        $.ajax({
            url:"../tree/getAddress",
            data:{id:id},
            type:"post",
            success:function(data){
                for(var i in data){
                    //		console.log(i);
                    $("#myForm input").each(function(index,dom){
                        if (i==$(dom).attr("name")) {
                            $(dom).val(data[i])
                        }
                    })
                }

            }
        })

    }




</script>


</html>